<template>
  <div class="app-container">
    <el-row :gutter="20" class="filter-container">
      <el-col :span="13">
        <el-breadcrumb separator="">
          <el-breadcrumb-item :to="$route.query.type == 'softmanage'?'/softManage/softManage':'/dashboard'"><i
            class="el-icon-arrow-left"
            style="cursor: pointer;"
          >返回</i></el-breadcrumb-item>
          <!-- <el-breadcrumb-item>软件库/</el-breadcrumb-item>
            <el-breadcrumb-item v-if="$route.query.software != 'up'">软件详情</el-breadcrumb-item>
            <el-breadcrumb-item v-else>已安装软件详情</el-breadcrumb-item> -->
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card min-main">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div class="text-center">
              <!-- <userAvatar :user="userInfo1" /> -->
              <el-upload
                class="avatar-uploader"
                action="http://10.10.10.11:9006/file/upload"
                :show-file-list="false"
                :headers="upHeaders"
                accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="imageUrl"
                  :src="imageUrl"
                  class="avatar"
                  style="border-radius: 50%;width: 160px;height: 160px; "
                >
                <img
                  v-else
                  src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
                  class="avatar"
                  style="border-radius: 50%;width: 160px;height: 160px; "
                >
                <!-- <i v-else class="el-icon-plus avatar-uploader-icon" /> -->
              </el-upload>
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                账号:
                <div class="pull-right">{{ userInfo1.userName }}</div>
              </li>
              <li class="list-group-item">
                姓名:
                <div class="pull-right">{{ userInfo1.realName }}</div>
              </li>
              <li class="list-group-item">
                部门:
                <div class="pull-right">{{ userInfo1.departmentName }}</div>
              </li>
              <li class="list-group-item">
                角色:
                <div class="pull-right">{{ userInfo1.roleType == '1024'?"超级管理员":
                  userInfo1.roleType == '1025'?"管理员":
                  userInfo1.roleType == '1026'?"审计员":'普通用户' }}</div>
              </li>
              <li class="list-group-item">
                手机号码:
                <div class="pull-right">{{ userInfo1.phone }}</div>
              </li>
              <!-- <li
                v-for="(item, index) in macList"
                :key="index"
                class="list-group-item"
              >
                <span :title="item.mac">MAC{{ index }}:  {{ item.mac &&
                  item.mac.length > 20?item.mac.slice(0, 20)+'...':item.mac }}</span>
              </li> -->
              <!-- <li class="list-group-item">
                创建日期:
                <div class="pull-right">{{ user.createTime }}</div>
              </li> -->
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card class="min-main">
          <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="userInfo1" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd :user="userInfo1" />
            </el-tab-pane>
            <el-tab-pane label="我的MAC" name="resetPwd1">
              <resetPwd1 :user="userInfo1" />
            </el-tab-pane>
            <el-tab-pane v-if="isManage" label="我管理的MAC" name="resetPwd2">
              <resetPwd2 :user="userInfo1" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import userAvatar from './userAvatar'
import userInfo from './userInfo'
import resetPwd from './resetPwd'
import resetPwd1 from './resetPwd1'
import resetPwd2 from './resetPwd2'
import { getToken } from '@/utils/auth'
import {
  getCookie,
  setCookie,
  removeCookie
} from '@/utils/cookie'
import { queryMac, userPut } from '@/api/user'
import {
  mapGetters
} from 'vuex'
import user from '@/store/modules/user'
export default {
  name: 'Profile',
  components: {
    userAvatar,
    userInfo,
    resetPwd,
    resetPwd1,
    resetPwd2
  },
  computed: {
    ...mapGetters([
      'name',
      'sidebar',
      'avatar',
      'userInfo'
    ]),
    isManage() {
      // console.log(getCookie('userInfo').realName)
      if (getCookie('userInfo')) {
        return JSON.parse(getCookie('userInfo')).roleType === 1024 ||
            JSON.parse(getCookie('userInfo')).roleType === 1025
      } else {
        return this.userInfo.roleType === 1024
      }
    }
  },
  data() {
    return {
      upHeaders: {
        ACCESS_TOKEN: getToken()
      },
      imageUrl: '',
      userInfo1: {},
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: 'userinfo',
      macList: []
    }
  },
  created() {
    console.log(getCookie('userInfo'))
    if (getCookie('userInfo')) {
      this.userInfo1 = JSON.parse(getCookie('userInfo'))
      this.imageUrl = JSON.parse(getCookie('userInfo')).header
    }
    if (JSON.parse(getCookie('userInfo')).id || this.userInfo.id) {
      this.queryMac(JSON.parse(getCookie('userInfo')).id || this.userInfo.id)
    }
    // this.getUser()
  },
  methods: {
    handleAvatarSuccess(res, file) {
      if (res && res.code === 200) {
        this.userInfo1.header = res.data + ''
        userPut({
          addId: this.userInfo1.addId,
          // id: this.userInfo1.id,
          header: this.userInfo1.header,
          nickName: this.userInfo1.nickName,
          realName: this.userInfo1.realName,
          remark: this.userInfo1.remark,
          phone: this.userInfo1.phone,
          departmentId: this.userInfo1.departmentId
        }).then(res => {
          if (res.code === 200) {
            this.$store.dispatch('user/getInfo').then(res => {
              console.log(res)
            })
            this.$message.success('修改成功，下次登录后生效')
          }
        })
      } else {
        this.$message.warning(res.message)
      }
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG|png格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    queryMac(params) {
      queryMac({
        userId: params || this.userInfo.id
      }
      ).then(res => {
        if (res.code == 200) {
          this.userInfo.MAC = ''
          this.macList = res.data.data
          // if (this.macList) {
          //   this.macList.map(item => {
          //     if (item.userId == this.userInfo.id && item.mac) { this.userInfo.MAC += ',' + item.mac }
          //   })
          //   // this.userInfo.MAC = this.userInfo.MAC.slice(1)
          // }
        }
      })
    },
    getUser() {
      // getUserProfile().then(response => {
      //   this.user = response.data
      //   this.roleGroup = response.roleGroup
      //   this.postGroup = response.postGroup
      // })
    }
  }
}

</script>
<style scoped>
  .min-main {
    min-height: 900px
  }
  .avatar-uploader {
    text-align: center;
    font-size: 60px;
  }
  /deep/.el-tabs__item {
    padding: 0 5px;
    height: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 40px;
    display: inline-block;
    list-style: none;
    font-size: 15px;
    font-weight: 500;
    position: relative;
  }
  .list-group-item {
    margin: 10px;
  }

  .filter-container {
    margin: 20px;
  }

  .pull-right {
    float: right;
    padding-right: 10px;
  }

</style>
